import React, { Component } from 'react';
import { toJS } from 'mobx';
import equals from 'deep-equal';
import { observer, inject } from 'mobx-react';
import { withRouter, Route } from 'react-router-dom';
import { Icon, Popover, ActivityIndicator, Result, Tools } from 'weaver-mobile';
import { ListAdvanced, RouteLayout, Reply } from 'weaver-mobile-page';
import CustomerCard from '../card/Customer';
import contactListRemindStore from '../../stores/list/ContactListRemindStore';

const Item = Popover.Item;
const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
let wrapProps;
if (isIPhone) {
  wrapProps = {
    onTouchStart: e => e.preventDefault(),
  };
}
const getLabel = Tools.getLabel;

@withRouter
@observer
export default class ContactRemindList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      store: new contactListRemindStore(),

    };
  }

  componentWillMount() {
    const { params, match } = this.props;
    const ps = params ? params : match.params;
    this.state.store.doNew(this, ps);
  }

  componentDidMount() {
    this.state.store.doInit();
    this.props.onRef && this.props.onRef(this);
  }

  componentWillUnmount() {
    this.state.store.doClear();
  }

  render() {
    const { store } = this.state;
    const { initResponsed, initSuccessed, initFailedMsg} = store;

    if (initResponsed) {
      if (initSuccessed) {
        const { listAd, detailLayout, rowId } = store;
        return (
          <div className="crm-list-content">
            <ListAdvanced 
              store = {listAd}
              rowKey = "id"
              searchKey = "customerName"
              searchBarProps= {{
                placeholder:getLabel("1268","客户名称")
              }}
              onSearch = {() => store.getList()}
              onRowClick = {(params) => { store.setRowId(params.id) }}
            />
            {detailLayout.init && <Route
              key = {detailLayout.id}
              path = {detailLayout.path}
              render = {() => {
                return (
                  <RouteLayout getContainer={() => document.getElementById("root")}>
                      <div
                        key="detailContent"
                        className="wm-route-layout"
                      >
                        <CustomerCard params={{ id: rowId, tabPage: "info" }} />
                      </div>
                  </RouteLayout>
                )
              }}
            />}
          </div>
        );
      } else {
        return (
          <div>
            <Result
              img={<Icon type="cross-circle-o" className="crm_commerce_initFailedMsg" style={{ fill: '#F13642' }} />}
              title=""
              message={initFailedMsg}
            />
          </div>);
      }
    } else {
      return <div className="crm-bg-loading"><ActivityIndicator text="Loading..." /></div>;
    }
  }

}